<template>
	<view>
		<u-navbar :is-back="false" :background="{
				backgroundColor: '#fff'
			}" >
			<!-- 测试 start -->
			<!-- <u-button type="primary" @click="handleTest">测试</u-button> -->
			<!-- 测试 end -->
		</u-navbar>
		
		<view class="body">
			<view class="wrap">
				<view class="u-tabs-box">
					<u-tabs-swiper activeColor="#2979ff" ref="tabs" :list="swipterList" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
				<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
							<view class="page-box">
								<u-swiper title effect3d indicator-pos="bottomRight" mode="dot" :list="companyDynamicList" ></u-swiper>
								<lg-list-item @on-click="clickItem" :data="orderList[0]"></lg-list-item>
								<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
							<view class="page-box">
								<lg-list-item :data="orderList[1]"></lg-list-item>
								<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="page-box">
								<lg-list-item :data="orderList[2]"></lg-list-item>
								<u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
							<view class="page-box">
								<lg-list-item :data="orderList[3]"></lg-list-item>
								<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--  消息提示 -->
		<u-toast ref="uToast" />
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
import { pageDynamicByType, getHotDynamicSort } from '../../services/home/index.js';
export default {
	data() {
		return {
			tabbar: '',
			companyDynamicList: [],
			orderList: [[], [], [], []],
			swipterList: [
				{
					name: '公司动态'
				},
				{
					name: '媒体报道'
				},
				{
					name: '行业干货'
				},
				{
					name: '行业资讯',
					count: 12
				}
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore']
		};
	},
	created() {
		//初始化 tabs-swiper
		this.initSwiperInfo();
	},
	onShow() {
		this.tabbar = getApp().globalData.tabbar;
	},
	onLoad() {
		this.getOrderList(0);
		this.getOrderList(1);
		this.getOrderList(2);
		this.getOrderList(3);
	},
	methods: {
		clickItem(item, index) {
			this.$u.route('/pages/dynamic-list-detail/dynamic-list-detail', {
				data: encodeURIComponent(JSON.stringify(item)) ,
				index
			});
		},
		handleTest() {},
		initSwiperInfo() {
			getHotDynamicSort()
				.then(({ result: { errCode, data, errMsg } = {} }) => {
					if (errCode == 0) {
						this.companyDynamicList = data.map(mi => ({ title: mi.title, image: mi.preview_img }));
					} else {
						this.$nextTick(function() {
							this.$refs.uToast.show({
								title: errMsg,
								type: 'error',
								position: 'top'
							});
						});
					}
				})
				.catch(e => {})
				.finally(() => {});
		},
		reachBottom() {
			// 此tab为空数据
			if (this.current != 2) {
				this.loadStatus.splice(this.current, 1, 'loading');
				setTimeout(() => {
					this.getOrderList(this.current);
				}, 1200);
			}
		},
		// 页面数据
		async getOrderList(idx) {
			const list = this.orderList[idx];
			let lastId = '';
			if (list.length) {
				lastId = list.pop()._id;
			}
			const {
				result: { data = [] }
			} = await pageDynamicByType({ id: lastId, type: idx + 1 });
			if (data.length) {
				this.orderList[idx].push(...data);
			}
			this.loadStatus.splice(this.current, 1, 'loadmore');
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
			this.getOrderList(index);
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

<style lang="scss" scoped>
.avatar-wrap {
	margin: 0 20rpx;
}

.page-box {
	padding: 20rpx;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
